import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          var mediaQuery = MediaQuery.of(context); // 获取屏幕尺寸信息
          var topPadding = mediaQuery.padding.top; // 获取刘海的顶部安全区域
          var mediaWidth = mediaQuery.size.width; // 获取屏幕宽度
          return Container(
            padding: EdgeInsets.only(top: topPadding),
            // color: Colors.amber,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Color(0xffd5a982),
                  Color(0xfff1e3d6),
                  Color(0xffffffff),
                ],
              ),
            ),
            child: Column(
              children: [
                Container(
                  height: 50,
                  // color: Colors.blue,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Icon(
                        Icons.settings, // 设置图标
                        size: 30, // 图标尺寸
                      ),
                      SizedBox(width: 5),
                      Icon(
                        Icons.star, // 其他图标
                        size: 30, // 图标尺寸
                      ),
                      SizedBox(width: 20),
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(top: 20, bottom: 10),
                  // color: Colors.red,
                  child: Center(
                    child: ClipOval(
                      // 使用ClipOval来将图像裁剪为圆形
                      child: Image.network(
                        'https://pic4.zhimg.com/v2-874b7cb7ded56394b549d34a68c76a00_r.jpg',
                        width: 75,
                        height: 75,
                      ),
                    ),
                  ),
                ),
                Container(
                  // color: Colors.blue,
                  width: double.infinity,
                  height: 36 + 18 + 10 + 20,
                  child: IntrinsicHeight(
                    child: Stack(
                      alignment: Alignment.topCenter,
                      children: [
                        Text(
                          "ssssssssssssssss",
                          style: TextStyle(
                              fontSize: 20, fontWeight: FontWeight.bold),
                        ),
                        Positioned(
                          top: 18,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                "ssssssssssssssssssss",
                                style: TextStyle(fontSize: 14),
                              ),
                              Icon(Icons.abc),
                            ],
                          ),
                        ),
                        Positioned(
                          top: 36,
                          child: Text(
                            "sssssssssss",
                            style: TextStyle(fontSize: 13),
                          ),
                        ),
                        Positioned(
                          top: 36 + 14,
                          child: Text(
                            "sssssssssss",
                            style: TextStyle(fontSize: 11),
                          ),
                        ),
                        Positioned(
                          top: 36 + 18 + 10,
                          child: Text(
                            "sssssssssss",
                            style: TextStyle(fontSize: 11),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Container(
                  // color: Colors.black26,
                  height: 50,
                  width: double.infinity,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      topButton(
                        title: "搭子",
                        value: "555",
                        onPressed: () {
                          print("点击了搭子");
                        },
                      ),
                      topButton(
                        title: "关心",
                        value: "115",
                        onPressed: () {
                          print("点击了关心");
                        },
                      ),
                      topButton(
                        title: "粉丝",
                        value: "5515",
                        onPressed: () {
                          print("点击了粉丝");
                        },
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(left: 40, right: 40),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(40),
                        topRight: Radius.circular(40),
                      ),
                    ),
                    child: Column(
                      children: [
                        Container(
                          // color: Colors.red,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              DataTextButton(
                                title: "搭圈",
                                value: "(555)",
                                titleColor: Colors.black,
                                valueColor: Colors.black,
                                btnid: 1,
                                onPressed: () {
                                  print("点击了搭圈");
                                },
                              ),
                              DataTextButton(
                                title: "社区",
                                value: "(115)",
                                titleColor: Colors.black,
                                valueColor: Colors.black,
                                btnid: 2,
                                onPressed: () {
                                  print("点击了社区");
                                },
                              ),
                              DataTextButton(
                                title: "喜欢",
                                value: "(5515)",
                                titleColor: Colors.black,
                                valueColor: Colors.black,
                                btnid: 3,
                                onPressed: () {
                                  print("点击了喜欢");
                                },
                              ),
                              DataTextButton(
                                title: "收藏",
                                value: "(5515)",
                                titleColor: Colors.black,
                                valueColor: Colors.black,
                                btnid: 4,
                                onPressed: () {
                                  print("点击了收藏");
                                },
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

//中间三个按钮
class topButton extends StatelessWidget {
  final String title;
  final String value;
  final VoidCallback onPressed;
  const topButton(
      {super.key,
      required this.title,
      required this.value,
      required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        onPressed();
      },
      child: Container(
        padding: EdgeInsets.all(5),
        child: Column(
          children: [
            Text(
              title,
              style:
                  TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
            ),
            Text(
              value,
              style: TextStyle(fontSize: 10, color: Colors.black),
            ),
          ],
        ),
      ),
    );
  }
}

//下面四个按钮
class DataTextButton extends StatefulWidget {
  final String title;
  final String value;
  final VoidCallback onPressed;
  final Color? titleColor;
  final Color? valueColor;
  final int btnid;
  const DataTextButton({
    super.key,
    required this.title,
    required this.value,
    required this.onPressed,
    this.titleColor,
    this.valueColor,
    required this.btnid,
  });

  @override
  State<DataTextButton> createState() => _DataTextButtonState();
}

class _DataTextButtonState extends State<DataTextButton> {
  // int tips = 4;
  int selectedBtnId = 1; // 默认选中的按钮ID为4
  // judgeColor(int btnid) {
  //   if (btnid == tips) {
  //     return Colors.black;
  //   } else {
  //     return Colors.black54;
  //   }
  // }
  Color getTextColor(int btnId) {
    return btnId == selectedBtnId ? Colors.black : Colors.black54;
  }

  // bool _isChoose = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // switch (widget.btnid) {
        //   case 4:
        //       tips = 4;
        //     break;
        //   case 5:
        //       tips = 5;
        //     break;
        //   case 6:

        //       tips = 6;

        //     break;
        //   case 7:

        //       tips = 7;

        //     break;
        // }
        setState(() {
          // _isChoose = !_isChoose;
          selectedBtnId = widget.btnid;
        });
        widget.onPressed();
      },
      child: Container(
        padding: EdgeInsets.all(5),
        // color: Colors.blue,
        child: Column(
          children: [
            Text(
              widget.title,
              style: TextStyle(
                fontWeight: FontWeight.bold,
                // color: widget.titleColor ?? Colors.black54,
                // color: judgeColor(widget.btnid)
                color: getTextColor(widget.btnid),
              ),
            ),
            Text(
              widget.value,
              style: TextStyle(
                fontSize: 10,
                // color: judgeColor(widget.btnid)
                color: getTextColor(widget.btnid),
              ),
              // style: TextStyle(
              // fontSize: 10, color: widget.valueColor ?? Color(0xff444444)),
            ),
          ],
        ),
      ),
    );
  }
}
